<template>
  <div class="question-bank">
    <h2>Java工程师刷题系统 - 题库</h2>
    <div class="filters">
      <input v-model="search" placeholder="搜索题目关键词..." />
      <select v-model="filterType">
        <option value="">全部类型</option>
        <option value="single">单选</option>
        <option value="multiple">多选</option>
        <option value="judge">判断</option>
        <option value="coding">编程题</option>
      </select>
      <select v-model="filterTag">
        <option value="">全部标签</option>
        <option v-for="tag in allTags" :key="tag" :value="tag">{{ tag }}</option>
      </select>
      <select v-model="filterDifficulty">
        <option value="">全部难度</option>
        <option value="简单">简单</option>
        <option value="中等">中等</option>
        <option value="较难">较难</option>
      </select>
      <button @click="startPractice">开始刷题</button>
    </div>
    <div class="question-list">
      <div v-for="q in filteredQuestions" :key="q.id" class="question-card">
        <div class="q-title">{{ q.question }}</div>
        <div class="q-meta">
          <span>类型: {{ typeMap[q.type] }}</span>
          <span>标签: {{ q.tags.join(', ') }}</span>
          <span>难度: {{ q.difficulty }}</span>
        </div>
      </div>
      <div v-if="filteredQuestions.length === 0">暂无题目</div>
    </div>
  </div>
</template>

<script>
import questions from '../api/mockQuestions';

export default {
  name: 'QuestionBank',
  data() {
    return {
      search: '',
      filterType: '',
      filterTag: '',
      filterDifficulty: '',
      questions,
      typeMap: {
        single: '单选',
        multiple: '多选',
        judge: '判断',
        coding: '编程题',
      },
    };
  },
  computed: {
    allTags() {
      const tags = new Set();
      this.questions.forEach(q => q.tags.forEach(t => tags.add(t)));
      return Array.from(tags);
    },
    filteredQuestions() {
      return this.questions.filter(q => {
        const matchType = this.filterType ? q.type === this.filterType : true;
        const matchTag = this.filterTag ? q.tags.includes(this.filterTag) : true;
        const matchDifficulty = this.filterDifficulty ? q.difficulty === this.filterDifficulty : true;
        const matchSearch = this.search ? q.question.includes(this.search) : true;
        return matchType && matchTag && matchDifficulty && matchSearch;
      });
    },
  },
  methods: {
    startPractice() {
      this.$router.push({ name: 'PracticePage' });
    },
  },
};
</script>

<style scoped>
.question-bank {
  max-width: 900px;
  margin: 32px auto;
  padding: 32px 24px 24px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
}
.filters {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.filters input,
.filters select {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid #e0e0e0;
  font-size: 15px;
  background: #f7f8fa;
  transition: border 0.2s;
}
.filters input:focus,
.filters select:focus {
  border: 1.5px solid #409eff;
  outline: none;
}
.filters button {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
}
.filters button:hover {
  background: #1976d2;
}
.question-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.question-card {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 18px 20px;
  background: #f7f8fa;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.04);
  transition: box-shadow 0.2s, border 0.2s;
}
.question-card:hover {
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.10);
  border: 1.5px solid #409eff;
}
.q-title {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 8px;
  color: #222;
}
.q-meta {
  color: #888;
  font-size: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.q-meta span {
  margin-right: 0;
}
@media (max-width: 700px) {
  .question-bank {
    padding: 16px 4vw;
    border-radius: 0;
    box-shadow: none;
  }
  .filters {
    gap: 8px;
  }
  .question-card {
    padding: 12px 8px;
  }
}
</style> 